<template>
<!-- 个人资料 -->
    <div class="Lo_presonal">
        <header class="Lo_presonal">
    <!-- 返回首页 -->
        <p class="Login_to_index" @click='back_to_login'>
          <img src="../../../static/imgs/return.png">
        </p>
        <p class="flex2">个人资料</p>
        <p class="flex3">保存</p>
    </header>
    <main>
        <section class="center">
            <article class="tou prer" @click='ko()'>
                <p>头像</p>
                <div>
                    <img class="tt" src="../../../static/imgs/dd_log.png" alt="">
                    <img class="back" src="../../../static/imgs/dd_infos7.png" alt="">
                </div>
            </article>

            <article class="nict">
                <p>昵称</p>
                <input type="text" placeholder="未填写">
            </article>

            <article class="nict">
                <p>手机号</p>
                <input type="text" placeholder="未填写">
            </article>

            <article class="nict">
                <p>性别</p>
                <input type="text" value="男" placeholder="">
            </article>

            <article id="pess" class="tou" @click='guodu()'>
                <p>证件地区</p>
                <div>
                    <p><img class="tc" :src="chimg" alt=""></p>
                    <img class="back" src="../../../static/imgs/dd_infos7.png" alt="">
                </div>
            </article>

            <article class="nict">
                <p>真实姓名</p>
                <input type="text" placeholder="未填写">
            </article>

            <article class="nict">
                <p>身份证号</p>
                <input type="text" placeholder="未填写">
            </article>

        </section>

    </main>
    <footer>
        <section class="center c2">
            <article class="nict">
                <p>身高(cm)</p>
                <input type="text" placeholder="未填写">
            </article>

            <article class="nict">
                <p>体重(kg)</p>
                <input type="text" placeholder="未填写">
            </article>
         </section>
         
    </footer>


    <!-- 头像选择 -->
    <div class="moT" v-show='keDown'>
        <div class="cctv">
            <div class="tiao">
                <p>拍照</p>
                <a href="#" class="file">从相册中选择
                   <input type="file" name="" id="">
                </a>
            </div>
            <div class="cancle" @click='keDown=false'>取消</div>
        </div>
    </div>



    <!-- 隐藏盒子 -->
        <div class="model"  @click='isOpens=false' v-show='isOpens' :class='{active:isOpens}'>

          <!-- <transition name="fade"> -->
            <div class="cont" :class='{topto:isOpens}'>
                <article v-for='item,i in lists' class="tet" @click='qhie(i)'>
                    <p><img :src="item.img"></p>
                    <p class="text" >{{item.jack}} </p>
                </article>
            </div>
          <!-- </transition> -->

        </div>
    </div>    
</template>
<script>
export default {
    name:'Lo_presonal',
    data:function(){
      return {
        isOpens:false,
        keDown:false,
        chimg:'../../../static/imgs/guoqi_03.png',
        lists:[
            {jack:'内地',img:'../../../static/imgs/guoqi_03.png'},
            {jack:'香港',img:'../../../static/imgs/guoqi_06.png'},
            {jack:'澳门',img:'../../../static/imgs/guoqi_08.png'},
            {jack:'台湾',img:'../../../static/imgs/guoqi_10.png'}
        ]
      }
    },
    methods:{
        back_to_login:function(){
            this.$router.go(-1)
        },
        qhie:function(x){
          this.chimg= this.lists[x].img,
          this.isOpens=false
        },
        guodu:function(){
            this.isOpens = true
        },
        ko:function(){
            this.keDown = true
        }
    }
}





</script>
<style scoped lang='less'>
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}
.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}
.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}
.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-right,@right);
   .px2rem(padding-left,@left);
}
.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}
.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}
html,body{
  width:100%;
  height:100%;
  background:#eff3f2;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}
header{
  width: 100%;
  .px2rem(height,88);
  background: url(../../../static/imgs/Reg_serve_bg01.jpg);
  .Flex;
   align-items: center;

  .Login_to_index{
    flex:1;
    padding-left:2%;
    img{
      display:block;
      .px2rem(width,55);
      .px2rem(height,53);
    }
  }
  .flex2{
    flex:4;
    .px2rem(font-size,37);
  }
  .flex3{
    flex:1;
    .px2rem(font-size,30);
  }
}
main{
  background:#ffffff;
  padding: 0 2%;
  
  .margin-top(20);
  .font-size(30);
}
.center{
  article{
    border-bottom: 1px solid #ccc;
  }
    .tou{
        .Flex;
        .padding-top(15);
        justify-content:space-between;
        align-items:center;
        .padding-bottom(20);
        div{
          .Flex;
          align-items:center;
            .tt{
                .px2rem(width,102);
               .px2rem(height,105);
               .margin-right(30); 
            }
            p{
              
              .tc{
               .px2rem(width,71);
               .px2rem(height,51);
               display:block;
               .margin-right(30);
            }
            }
            
          }
    }
    .nict{
      .padding-top(30);
      .padding-bottom(30);
        .Flex;
        justify-content:space-between;
        align-items:center;
        input{
          border:none;
          text-align: center;
          .px2rem(width,200);
        }
    }
}
.c2{
   .margin-top(20);
}
footer{
  .font-size(30);
  background:#ffffff;
  padding: 0 2%;
}
@keyframes show {
  0% {background-color: rgba(0,0,0,0); }
  100% {background-color: rgba(0,0,0,0.5); }
}
div.active{
  /*transform: scale(1);*/
  background-color: rgba(0,0,0,0.5);

}
div.topto{
  bottom:0;
}
.model{
  
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
   /*background:rgba(125, 125, 125,0.5);*/
   animation: show 1s forwards;
   background-color: rgba(0,0,0,0);
   /*transform: scale(0);
   transition: transform 3s ease;*/
    .cont{
        width:100%;
        position:absolute;
        /*.px2rem(bottom,-400);*/
        background:#ffffff;
        .tet{
           border-bottom: 1px solid #ccc;
           padding:3% 4%;
           .Flex;
           .font-size(30);
           align-items:center;
           img{
               .px2rem(width,71);
               .px2rem(height,51);
               
            }
            .text{
              .margin-left(20);
            }
        }
       

    }
}


.moT{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    animation: show 1s forwards;
    .cancle{
        position:absolute;
        color: blue;
        background:#ffffff;
        text-align:center;
        .px2rem(bottom,20);
        width:94%;
        .margin-left(20);
        .font-size(30);
        .px2rem(border-radius,20);
        .padding-top(20);
       .padding-bottom(20);
    }
    .tiao{
       .padding-top(20);
       .padding-bottom(20);
       color: blue;
        position:absolute;
        .px2rem(bottom,120);//
        width:94%;
        .margin-left(20);
        background:#ffffff;
        text-align:center;
        .font-size(30);
        .px2rem(border-radius,20);
        p{
          border-bottom:1px solid #ccc;
          .padding-bottom(20);
          .margin-bottom(20);
        }
    }
    .file {
        position: relative;
        display: inline-block;
        
        .padding(4,4,12,12);
        overflow: hidden;
        text-decoration: none;
        text-indent: 0;
        .line-height(20);
        input {
          position: absolute;
          
          right: 0;
          top: 0;
          opacity: 0;
        }
       .file:hover {
          background: #AADFFD;
          border-color: #78C3F3;
          text-decoration: none;
        }    
    }
}






</style>




